<template>
  <div class="customerOverview-container">
    <div class="customerOverview-page">
      <el-card>
        <div style="padding:20px 0">
          <el-upload
                     drag
                     style="width:500px"
                     :limit="20"
                     :data="uploadToken"
                     :on-error="handleAvatarError"
                     :on-success="handleAvatarSuccess2"
                     :before-upload="beforeAvatarUpload"
                     :show-file-list="false"
                     action="https://upload.qiniup.com"
                     accept=".jpeg,.jpg,.png,.pdf">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__text">只能上传jpg/png/pdf文件</div>
          </el-upload>
          <div style="padding:20px 0">
            <div style="width:80px;height:80px;margin-bottom:10px;margin-right:10px;vertical-align: middle;position: relative;display:inline-block" v-for="(item,index) in fileList">
              <img :src="item.picUrl"  style="width:100%;height:100%;object-fit: contain;" @click="showBigImg(item.picUrl)" @error="slnotimg($event)"/>
              <i class="el-icon-error" style="cursor: pointer;position: absolute;right:0;top:0;" @click="delImg2(item.picId)"></i>
            </div>

          </div>

        </div>




      </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {formatDate} from '@/utils/date';
import store from '@/store'
import {getQiniuToken,addAgreement,delAgreement} from '@/api/partner'
import {developAgreementList} from '@/api/company'
import axios from "axios";
const defaultListQuery={
  customerId:'',
};
export default {
  name: "customerSycl",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      fileList:[],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      listLoading: false,
      uploadToken:{
        token:'',
      },
      imgDomain:'',
      fullscreenLoading:false

    }
  },
  components : {

  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),

  },
  created() {

  },
  filters: {

  },
  methods:{
    handleAvatarError(){
      this.$message({
        message: '上传失败',
        type: 'error'
      });
    },
    //放大图片
    showBigImg(src){
        window.open(src)
    },
    beforeAvatarUpload(file) {
      const isIMG = (/^image\/(jpg|jpeg|png)$/.test(file.type) || /^application\/(pdf)$/.test(file.type))
      if (!isIMG) {
        this.$confirm('上传图片暂时只支持JPG,PNG,PDF格式', '提示', {
          confirmButtonText: '知道了',
          showCancelButton: false,
          type: 'error'
        })
      }
      if (isIMG) {
        const suffix = file.name
        const timestamp = new Date().getTime()
        const key = timestamp + `${suffix}`
        this.uploadToken.key = key
        return this.uploadToken
      } else {
        return isIMG
      }
    },
    // 图片加载出错显示加载出错图
    slnotimg(event) {
      var img = event.srcElement
      img.src = 'https://clientfile.56zly.com/FoPof4NDoMSJISMJYtnUaHrOZjyK'
      img.onerror = null
    },
    //上传质量协议图片
    handleAvatarSuccess2(res){
      // console.log("res",res);
      let url = this.imgDomain+res.key;
      addAgreement({customerId:this.listQuery.customerId,picUrl:url}).then((res)=>{
        this.getList();
        this.$message({
          type: 'success',
          message: '上传成功!'
        });
      }).catch(()=>{
        this.$message({
          type: 'error',
          message: '上传失败!'
        });
      })

    },

    preview(file){
      window.open(file.name)
    },
    //删除图片
    delImg2(id){
      delAgreement({customerId:this.listQuery.customerId,picId:id}).then(()=>{
        this.getList();
        this.$message({
          type: 'success',
          message: '已删除!'
        });
      }).catch(()=>{
        this.$message({
          type: 'error',
          message: '删除失败!'
        });
      })
    },


    //获取七牛TOKEN
    getUploadToken(){
      getQiniuToken().then((res)=>{
        this.uploadToken.token = res.token;
        this.imgDomain = res.domain
      })
    },

    init(customerId){
      this.listQuery.customerId = customerId;
      this.getList();
      this.getUploadToken()
    },

    //获取列表
    getList() {
      this.listLoading = true;
      developAgreementList(this.listQuery).then(response => {
        this.fileList = response;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
  }
}
</script>

<style lang="scss">


</style>
